<style lang="less">
  #div_driver_earnest_dialog {
    .active {
      border: 1px solid red;
    }
    .f-cp {
      cursor: pointer;
    }
    .div-ali-pay {
      background: #ffffff;
      width: 70%;
      line-height: 36px;
      text-align: center;
      border-radius: 4px;
    }
    .f-h36 {
      height: 36px;
    }
    .f-w100 {
      width: 100px;
    }
  }
</style>

<template>
  <div id="div_driver_earnest_dialog">
    <el-dialog title="定金收取" :visible.sync="isShow" width="30%">
      <el-row>
        <el-col :span="24">
          <el-col :span="6">
            <div class="grid-content ">
              请输入定金金额：
            </div>
          </el-col>
          <el-col :span="18">
            <div class="grid-content ">
              <el-input type="number" v-model="rechargeDialogModel.money" min="1" style="width: 60%">
                <template slot="append">元</template>
              </el-input>
            </div>
          </el-col>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content">
            <div>
              <p>第三方充值</p>
              <el-row class="f-pb10 f-pl10">
                <el-col :span="8">
                  <div class="grid-content">
                    <div class="div-ali-pay f-cp f-h36"
                         v-bind:class="{ active: rechargeDialogModel.isAlipay }"
                         @click="payType('aliPay')">
                      <img src="../../assets/aliPayLogo.png" class="f-w100">
                    </div>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="grid-content ">
                    <div class="div-ali-pay f-cp f-h36"
                         v-bind:class="{ active: rechargeDialogModel.isUnionPay }"
                         @click="payType('weChatPay')">
                      <img src="../../assets/weChatLogo.png" class="f-w100">
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-col>
        <el-col :span="24">
          <div class="grid-content f-tar">
            <div>
              <p>充值：{{rechargeDialogModel.money}}元</p>
            </div>
          </div>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
                <el-button @click="isShow = false">取 消</el-button>
                <el-button type="primary" @click="confirmRecharge">充 值</el-button>
      </span>
    </el-dialog>
    <el-dialog title="请使用微信客户端扫一扫支付" :visible.sync="rechargeDialogModel.wechatQRCodeDialog"
               width="30%">
      <div v-html="html">
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { resetForm, isEmpty } from '../../lib/util.js';
import {
  newAliPayRecharge,
  unionRecharge,
  newWeChatRecharge,
  refreshWeChatRecharge
} from '../../api/pay/recharge.js';

export default {
  name: 'DriverEarnestDialog',
  props: {
    driverModel: {}
  },
  watch: {
    driverModel (val) {
      resetForm(this.$refs.truckLoadMessageForm, this.truckLoadMessageForm);
      let model = JSON.parse(val);
      if (isEmpty(model.truckLoadDriver) || isEmpty(model.truckLoadDriver.id)) {
        return;
      }
      this.truckLoadDriverId = model.truckLoadDriver.id;
      this.isShow = model.isShow;
    }
  },
  data () {
    return {
      html: '',
      truckLoadDriverId: '',
      rechargeDialogModel: {
        rechargeDialog: false,
        selectRechargeDialog: false,
        wechatQRCodeDialog: false,
        money: '',
        payType: '',
        isAlipay: false,
        isWeChatPay: false,
        isUnionPay: false,
        serialNo: ''
      },
      isShow: false
    };
  },
  methods: {
    payType (payType) {
      this.rechargeDialogModel.payType = payType;
      switch (this.rechargeDialogModel.payType) {
        case 'aliPay':
          // 选择支付宝充值
          this.rechargeDialogModel.isAlipay = true;
          this.rechargeDialogModel.isUnionPay = this.rechargeDialogModel.isWeChatPay = false;
          break;
        case 'weChatPay':
          // 选择微信充值
          this.rechargeDialogModel.isUnionPay = true;
          this.rechargeDialogModel.isWeChatPay = this.rechargeDialogModel.isAlipay = false;
          break;
        case 'unionPay':
          // 选择银联充值
          this.rechargeDialogModel.isAlipay = this.rechargeDialogModel.isUnionPay = false;
          this.rechargeDialogModel.isWeChatPay = true;
          break;
      }
    },
    confirmRecharge () {
      if (parseFloat(this.rechargeDialogModel.money) < 1) {
        return this.$message.error('充值金额最少1元');
      }
      let truckLoadDriverId = this.truckLoadDriverId;
      switch (this.rechargeDialogModel.payType) {
        case 'aliPay':
          // 支付宝充值
          newAliPayRecharge(truckLoadDriverId, this.rechargeDialogModel.money, '102019002').then((res) => {
            this.rechargeDialogModel.selectRechargeDialog = true;
            window.document.write(res.data);
          });
          break;
        case 'weChatPay':
          // 微信充值
          newWeChatRecharge(truckLoadDriverId, this.rechargeDialogModel.money, '102019002').then((res) => {
            this.rechargeDialogModel.wechatQRCodeDialog = true;
            this.rechargeDialogModel.serialNo = res.data.obj.serialNo;
            let com = 'http://qr.liantu.com/api.php?text=';
            let url = com + res.data.obj.codeUrl;
            this.html = '<img style="width: 100%;margin: auto" src=' + url + ' />';
            this.stopWeChat = setInterval(() => {
              this.refreshWeChatRecharge(res.data.obj.serialNo);
            }, 5000);
          });
          break;
        case 'unionPay':
          // 银联充值
          unionRecharge(truckLoadDriverId, this.rechargeDialogModel.money).then((res) => {
            this.rechargeDialogModel.selectRechargeDialog = true;
            window.document.write(res.data);
          });
          break;
      }
    },
    refreshWeChatRecharge (val) {
      let fundTransactionStatus = '';
      refreshWeChatRecharge(val).then((res) => {
        fundTransactionStatus = res.data.obj.fundTransactionStatus;
        if (fundTransactionStatus === 103003001) {
          clearInterval(this.stopWeChat);
          this.$message.success('充值成功');
          location.reload();
        }
      });
    }
  },
  mounted () {}
};
</script>
